<template>
    <div>
        <div style="height: 102px;border-bottom: 2px solid #ff6700">
            <div style="width: 1226px;margin: auto">
                <div style="width: 94px;margin-top: 26px;float: left">
                    <a href="/">
                        <img src="http://i.serengeseba.com/uploads/i_4_2503644824x1245481406_26.jpg" width="48px"
                             height="48px" style="border-radius: 25%;">
                    </a>
                </div>
                <div>
                    <h2 style="margin-top: 26px;float:left;line-height: 48px;font-size: 28px;font-weight: 400">
                        我的购物车</h2>
                </div>
                <div style="float: right;margin-top:40px;font-size:20px;color: #FF6700" class="dengLu">
          <span v-show="xianshi_1">
              你好 &nbsp{{ userName }}
          </span>
                    &nbsp &nbsp
                    <span v-show="xianshi_2">
               {{ userEmail }}
            </span>
                </div>
            </div>
        </div>
        <div v-if="que" style="width: 1226px;margin: auto">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"/>
                <el-table-column align="center">
                    <template v-slot="scope">
                        <el-image
                                style="width: 40px; height: 40px"
                                :src="scope.row.prod_pic"
                        >
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prod="prod_title" label="商品名称" width="450" align="center">
                    <template slot-scope="scope">
                        <h3>
                            {{ scope.row.prod_title }}&nbsp&nbsp&nbsp{{ scope.row.prod_version }}
                        </h3>
                    </template>
                </el-table-column>
                <el-table-column prop="prod_price_current" label="单价" width="100" align="center"/>
                <el-table-column prop="amount" label="数量" align="center" width="200">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.amount" @change="changeVal($event,scope.row)" :min="1"
                                         :max="5"
                                         label="描述文字">
                        </el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="prod_price_current * amount" label="总计" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.prod_price_current * scope.row.amount }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-close" circle @click="del(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="foot" style="width: 1226px;height: 100px">
                <div class="foot-left">
                    <router-link to="/">继续购物</router-link>
                    <span style="padding-left: 8px;">
                    共&nbsp <span style="color:#FF6700;">{{ total_1 }}</span>&nbsp件，已选择&nbsp <span
                            style="color:#FF6700;">{{ choose }}</span>&nbsp件
                    </span>
                </div>
                <div class="foot-right">
                    <div style="line-height: 50px">
                        <span style="color: #FF6700">
                           合计 ：
                        <span style="font-size: 30px">{{ money }}</span>
                        元
                        </span>

                        <div class="anNiu" style="float: right">
                            <a href="javascript:void(0);" @click="check()" >去结算</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="background:#f5f5f5;height: 600px;border: 1px solid #f5f5f5;margin-top: 5px" v-else>
            <div class="zhu">
            </div>
            <div class="left" style="margin-left:50%;margin-top:-200px;width: 300px">
                <h2 style="font-size: 30px;color:#b0b0b0"> 您的购物车还是空的</h2>
                <div class="anNiu"><router-link to="/">马上去购物</router-link></div>
            </div>
        </div>
        <Foot/>
    </div>
</template>

<script>
    import {getToken} from "@/utils/auth";

    import Foot from '../components/xiaomibody/Foot'
    import {selectAll, updateNumber, deleteCart} from "../api/Cart";

    export default {
        name: "cart",
        components: {Foot},
        data() {
            return {
                tablekey: false,
                userName: this.$store.getters.userName,
                userEmail: this.$store.getters.email,
                xianshi_1: true,
                xianshi_2: false,
                //数量计数器
                num: 1,
                //产品信息
                prodId: this.$route.query.prodId,
                prodVersion: this.$route.query.prodVersion,
                tok: getToken(),
                tableData: [],
                // 共几件
                total: 0,
                // 购物车被选中的商品list
                cart_1: [],
                //
            }
        },
        created() {
            this.getProdInfo()
            this.xianshi()
        },
        methods: {
            // 想确认订单页面传值
            check(){
                if (this.cart_1.length == 0 ){
                    this.$message.error("请先选择商品")
                }else{
                    this.$router.push({
                        path:'/CheckOrder',
                        query:{
                            cart_1 : this.cart_1
                        }
                    })
                }
            },
            xianshi() {
                if (this.$store.getters.userName != null) {
                    this.xianshi_1 = true
                    this.xianshi_2 = false
                } else {
                    this.xianshi_1 = false
                    this.xianshi_2 = true
                }
            },
            //数量计数器的改变
            changeVal(e, row) {
                this.$forceUpdate();
                let id = row.id
                for (let obj of this.cart_1) {
                    if (id === obj.id) {
                        obj.amount = row.amount;
                    }
                }
                updateNumber(row.amount, row.id);
            },
            // 删除购物车
            del(row) {
                this.$confirm('是否确认删除').then(function () {
                    return deleteCart(row.id)
                }).then(() => {
                    this.getProdInfo()
                }).catch(() => {
                })

            },
            //商品信息查询
            getProdInfo() {
                selectAll().then(response => {
                    this.tableData = response.message;
                    this.total = response.length;
                    for (let p of this.tableData) {
                        p.prod_pic = process.env.VUE_APP_BASE_API + p.prod_pic
                    }
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].uid = i;
                    }
                    this.total = response.message.length
                })
            },
            /** 多选框选中数据 */
            handleSelectionChange(selection) {
                this.cart_1 = selection
            },
        },
        computed: {
            money: function () {
                let sum = 0;
                for (let obj of this.cart_1) {
                    sum += obj.amount * obj.prod_price_current
                }
                return sum
            },
            total_1: function () {
                let sum = 0
                for (let obj of this.tableData) {
                    sum += obj.amount
                }
                return sum

            },
            choose: function () {
                let sum = 0;
                for (let obj of this.cart_1) {
                    sum += obj.amount
                }
                return sum
            },
            que:function (){
                return this.tableData.length > 0
            }

        },
    }
</script>

<style scoped>
    .foot-left {
        padding-top: 15px;
        float: left;
        width: 300px;
        height: 50px;
    }

    .foot-right {
        width: 400px;
        height: 50px;
        float: right;
    }

    .dengLu a {
        padding-left: 10px;
        float: left;
    }

    .zhu {
        background: url(../assets/loginPage/cart.png);
        margin-top: 100px;
        margin-left: 20%;
        width: 359px;
        height: 273px;
    }

    .left {
        width: 400px;
    }

    .anNiu {
        width: 170px;
        height: 48px;
        background-color: #ff6a03;
        border-color: #ff6a03;
        text-align: center;
    }

    .anNiu a {
        color: white;
        font-size: 18px;
        line-height: 48px;
    }


</style>
